@charset "UTF-8";
/**
 * zhx.camera.monitor scss
 *
 * Author : Vicco Wang
 * Date : 2017.03.29 
 *   
 */
/**
 * 基础字体颜色
 * @type {[type]}
 */
/**
 * 基础 轻 字体色
 * @type {[type]}
 */
.zhx-camera-monitor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 100%; }
  .zhx-camera-monitor .camera-monitor-navigation {
    width: 180px;
    flex: none;
    background-color: #343c4a; }
    .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree {
      padding: 10px; }
      .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree, .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree a {
        color: #dedede; }
        .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree .activeCamera, .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree a .activeCamera {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #00E676;
          border-radius: 5px;
          position: relative;
          top: -2px;
          margin-left: 5px; }
      .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree li a.curSelectedNode {
        background-color: #5c636d;
        border: none;
        color: #fff;
        border-radius: 3px; }
      .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree li span.button.treeLineNode_ico_open {
        margin-right: 3px;
        background-size: 100% !important;
        background: url("ztree_img/pos_active.png") center no-repeat; }
      .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree li span.button.treeLineNode_ico_close {
        margin-right: 3px;
        background-size: 100% !important;
        background: url("ztree_img/pos.png") center no-repeat; }
      .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree li span.button.treeBusNode_ico_open {
        margin-right: 3px;
        background-size: 100% !important;
        background: url("ztree_img/bus_active.png") center no-repeat; }
      .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree li span.button.treeBusNode_ico_close {
        margin-right: 3px;
        background-size: 100% !important;
        background: url("ztree_img/bus.png") center no-repeat; }
      .zhx-camera-monitor .camera-monitor-navigation #camera-monitor-tree .ztree li span.button.treeCameraNode_ico_docu {
        margin-right: 3px;
        background-size: 100% !important;
        background: url("ztree_img/camera_gray.png") center no-repeat; }
  .zhx-camera-monitor .camera-monitor-main {
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #343c4a; }
    .zhx-camera-monitor .camera-monitor-main .camera-monitor-header {
      height: 40px;
      flex: none;
      background-color: #5c636d;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex; }
      .zhx-camera-monitor .camera-monitor-main .camera-monitor-header > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #d1d1d1;
        font-size: 14px; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-header > div.line-name {
          width: 80px;
          font-weight: bold;
          color: #fff;
          background-color: #009aff; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-header > div.bus-number {
          width: 120px; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-header > div.select-camera {
          flex: 1; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-header > div.time {
          width: 200px;
          background-color: #454a51; }
    .zhx-camera-monitor .camera-monitor-main .camera-monitor-section {
      flex: 1; }
      .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list {
        width: 100%;
        height: 100%; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block {
          position: relative; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:before {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            color: #6b6b6b; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(1):before {
            content: "CAMERA 1"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(2):before {
            content: "CAMERA 2"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(3):before {
            content: "CAMERA 3"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(4):before {
            content: "CAMERA 4"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(5):before {
            content: "CAMERA 5"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(6):before {
            content: "CAMERA 6"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(7):before {
            content: "CAMERA 7"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(8):before {
            content: "CAMERA 8"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(9):before {
            content: "CAMERA 9"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block:nth-child(10):before {
            content: "CAMERA 10"; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block .monitor-event-mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            box-sizing: border-box; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block .monitor-event-mask.focuseBorder {
              border: 3px solid #00E676; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block .monitor-loading-mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            -webkit-justify-content: center;
            align-items: center;
            justify-content: center;
            z-index: 9;
            color: #9E9E9E;
            background-color: black; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block .camera-monitor-icon {
            position: absolute;
            opacity: .5;
            z-index: 11; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block .camera-monitor-icon.close-monitor {
              right: 10px;
              top: 10px;
              cursor: pointer;
              font-size: 30px; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block .camera-monitor-icon.max-size {
              right: 10px;
              bottom: 10px;
              cursor: pointer;
              font-size: 24px; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block .camera-monitor-icon.monitor-speaker {
              bottom: 10px;
              left: 10px; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.monitor-block .monitor-camera-main {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list > div.full,
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.column_layer_2 > div,
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer > div,
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.float_layer_3 > div,
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.float_layer_6 > div,
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer_vhs > div,
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer_all > div {
          width: 100%;
          height: 100%;
          color: #fff;
          box-sizing: border-box;
          border: 1px solid #6b6b6b;
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: center;
          -webkit-justify-content: center;
          align-items: center;
          justify-content: center;
          overflow: hidden; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.column_layer_2 {
          column-count: 2;
          column-gap: 0; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.column_layer_2 > div.column_half_h {
            width: 100%;
            height: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.column_layer_2 > div.column_half_v {
            width: 100%;
            height: 50%; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer {
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: center;
          -webkit-justify-content: center;
          align-items: center;
          justify-content: center;
          flex: 1 auto;
          flex-wrap: wrap; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer > div.flex_half {
            width: 50%;
            height: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer > div.flex_vh {
            width: 50%;
            height: 50%; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.float_layer_3 > div {
          float: left;
          width: 50%;
          height: 100%;
          overflow: hidden; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.float_layer_3 > div.float_small {
            width: 50%;
            height: 50%; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.float_layer_6 > div {
          float: left;
          width: 33.333%;
          height: 30%;
          overflow: hidden; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.float_layer_6 > div.float_big {
            width: 66.666%;
            height: 69.8%;
            border-bottom: none; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.float_layer_6 > div.float_small {
            width: 33.333%;
            height: calc( 69.8% / 1.996); }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer_vhs {
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          flex-wrap: wrap; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer_vhs > div {
            width: 33.333%;
            height: 33.333%; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer_all {
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          flex-wrap: wrap; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer_all > div {
            width: 25%;
            height: 25%; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer_all > div:nth-child(1), .zhx-camera-monitor .camera-monitor-main .camera-monitor-section .camera-list.flex_layer_all > div:nth-child(2) {
              width: 50%;
              height: 50%; }
    .zhx-camera-monitor .camera-monitor-main .camera-monitor-type {
      height: 40px;
      flex: none;
      background-color: #5c636d;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex; }
      .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; }
        .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li {
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: center;
          -webkit-justify-content: center;
          align-items: center;
          justify-content: center;
          flex: 1;
          cursor: pointer; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li.active {
            background-color: #1f242c;
            color: #fff; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li.active:nth-child(1):before {
              content: '';
              width: 24px;
              height: 24px;
              background: url("../images/1x1_active.png") no-repeat;
              background-size: 100%; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li.active:nth-child(2):before {
              content: '';
              width: 24px;
              height: 24px;
              background: url("../images/1x2_active.png") no-repeat;
              background-size: 100%; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li.active:nth-child(3):before {
              content: '';
              width: 24px;
              height: 24px;
              background: url("../images/1x3_active.png") no-repeat;
              background-size: 100%; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li.active:nth-child(4):before {
              content: '';
              width: 24px;
              height: 24px;
              background: url("../images/1x4_active.png") no-repeat;
              background-size: 100%; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li.active:nth-child(5):before {
              content: '';
              width: 24px;
              height: 24px;
              background: url("../images/1x6_active.png") no-repeat;
              background-size: 100%; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li.active:nth-child(6):before {
              content: '';
              width: 24px;
              height: 24px;
              background: url("../images/1x9_active.png") no-repeat;
              background-size: 100%; }
            .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li.active:nth-child(7):before {
              content: '';
              width: 24px;
              height: 24px;
              background: url("../images/1x10_active.png") no-repeat;
              background-size: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li:nth-child(1):before {
            content: '';
            width: 24px;
            height: 24px;
            background: url("../images/1x1.png") no-repeat;
            background-size: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li:nth-child(2):before {
            content: '';
            width: 24px;
            height: 24px;
            background: url("../images/1x2.png") no-repeat;
            background-size: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li:nth-child(3):before {
            content: '';
            width: 24px;
            height: 24px;
            background: url("../images/1x3.png") no-repeat;
            background-size: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li:nth-child(4):before {
            content: '';
            width: 24px;
            height: 24px;
            background: url("../images/1x4.png") no-repeat;
            background-size: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li:nth-child(5):before {
            content: '';
            width: 24px;
            height: 24px;
            background: url("../images/1x6.png") no-repeat;
            background-size: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li:nth-child(6):before {
            content: '';
            width: 24px;
            height: 24px;
            background: url("../images/1x9.png") no-repeat;
            background-size: 100%; }
          .zhx-camera-monitor .camera-monitor-main .camera-monitor-type ul li:nth-child(7):before {
            content: '';
            width: 24px;
            height: 24px;
            background: url("../images/1x10.png") no-repeat;
            background-size: 100%; }
